<template>
  <div style="padding: 0.2rem">
    <div class="title1">
      <div style="margin: 0.1rem">
        <label for="">活动名称：</label>
        <el-input v-model="active_name" placeholder="请输入要搜索的活动名称" style="width: 1.7rem" />
      </div>

      <div style="margin-left: 0.2rem; margin: 0.1rem">
        <label for="">请选择活动状态：</label>
        <el-radio-group v-model="value1">
          <el-radio :value="true">正在进行</el-radio>
          <el-radio :value="false">已结束</el-radio>
        </el-radio-group>
      </div>
  
      <div style="margin-left: 0.2rem; margin: 0.1rem">
        <label for="">请选择活动类型：</label>
        <el-select v-model="activity_type" placeholder="请选择活动类型" style="width: 1.7rem">
          <el-option label="线上活动" value="线上活动" />
          <el-option label="线下活动" value="线下活动" />
        </el-select>
      </div>
      <div style="margin-left:0.1rem;">
        <el-button @click="getactivitylist" type="primary">搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </div>

    <el-table :data="show_list" style="width: 100%;box-shadow: 0 0 0.05rem #ccc;color: black;">
      <el-table-column fixed prop="_id" label="活动编号" width="250" />
      <el-table-column prop="activity_name" label="活动名称" width="120" />
      <el-table-column prop="activity_img" label="活动图片" width="120">
        <template v-slot="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.activity_img"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[scope.row.activity_img]"
            :initial-index="4"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="activity_type" label="活动类型" width="120" />
      <el-table-column prop="activity_Begin_time" label="活动开始时间" width="130">
        <template v-slot="scope">
          <span>{{ scope.row.activity_Begin_time.slice(0, 10) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="activity_end_time" label="活动结束时间" width="130">
        <template v-slot="scope">
          <span>{{ scope.row.activity_end_time.slice(0, 10) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="Activity_Definition" label="活动定义" width="120" />
      <el-table-column prop="Active_istrue" label="当前活动是否开启" width="160">
        <template v-slot="scope">
          <span>{{ scope.row.Active_istrue ? '开启' : '关闭' }}</span>
          <el-switch
            v-model="scope.row.Active_istrue"
            :active-action-icon="View"
            :inactive-action-icon="Hide"
            @change="changeActive(scope.row._id)"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="Activity_Level_Restrictions"
        label="参与活动人员等级限制"
        width="200"
      />
      <el-table-column prop="activity_describe" label="活动描述" width="120" />
      <el-table-column prop="active_jiangpin" label="活动奖品" width="270">
        <template v-slot="scope">
          <p>一等奖：{{ scope.row.active_jiangpin.one_jiangpin }}</p>
          <p>二等奖：{{ scope.row.active_jiangpin.two_jiangpin }}</p>
          <p>三等奖：{{ scope.row.active_jiangpin.three_jiangpin }}</p>
          <p>安慰奖：{{ scope.row.active_jiangpin.anweijiangpin }}</p>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" min-width="120">
        <template v-slot="scope">
          <el-button link type="primary" size="small" @click="Updataitem(scope.row)">
            修改
          </el-button>
          <el-button link type="primary" size="small" @click="delitem(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[2, 4, 6, 8]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { getactivity, delactivity, putactivity } from '@/request/api/api.ts'
onMounted(() => {
  getactivitylist()
})
const router = useRouter()
const value1 = ref('')
const active_name = ref('')
const activity_type = ref('')
const currentPage4 = ref(1)
const pageSize4 = ref(4)
let tableData = ref([])

// 获取活动列表
const getactivitylist = async () => {
  let data = await getactivity({
    active_name: active_name.value,
    active_istrue: value1.value,
    activity_type: activity_type.value,
  })
  tableData.value = data.data
  value1.value = ''
  active_name.value = ''
  activity_type.value = ''

}

// 每一页最多显示多少条
const handleSizeChange = (val: number) => {
  pageSize4.value = val
}

// 当前在第几页
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage4.value = val
}

// 分页
const show_list = computed(() => {
  return tableData.value.slice(
    (currentPage4.value - 1) * pageSize4.value,
    currentPage4.value * pageSize4.value
  )
})

// 删除活动
const delitem = async (item: string) => {
  console.log(item)
  let data = await delactivity({ _id: item })
  if (data.code == 200) {
    alert('删除成功')
    getactivitylist()
  }
}

// 关闭/开启活动
const changeActive = async (item: string) => {
  let data = await putactivity({ _id: item })
  if (data.code == 200) {
    alert(`${data.msg}`)
    getactivitylist()
  }
}

// 修改活动
const Updataitem = async (item: any) => {
  router.push(`/xxk/updata_activify?_id=${item._id}`)
}
</script>


<style lang="scss" scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.demo-pagination-block {
  margin-top: 0.2rem;
  float: right;
}
.title1 {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  background-color: white;
  // padding: 20px;
  margin-bottom: 20px;
}
.title1 {
  box-sizing: border-box;
  width: 100%;
  background-color: white;
  // padding: 20px;
  margin-bottom: 20px;
}
.demo-pagination-block {
  padding: 0.1rem;
  margin-top: 0.2rem;
  float: right;
}
.title1 .el-input {
  width: 400px;
  height: 40px;
}

.buttom .el-button {
  width: 80px;
  height: 30px;
}
</style>
